<div class="launch-cluster">
  <h2>
    {{t "clusterNew.register.title"}}
  </h2>
  <div class="row mb-20">
    {{#if disabledAddCluster}}
      <BannerMessage
        @color="bg-warning"
        @icon="icon-alert"
        @message={{t "clustersPage.clusterLaunchDisabled"}}
      />
    {{/if}}
    <div class="row-same-height">
      <a
        class="col span-2 cluster-driver-box small span-height"
        href="{{href-to "global-admin.clusters.new.launch" "import" (query-params importProvider='eks')}}"
        disabled={{disabledAddCluster}}
      >
        <div class="machine-driver amazoneks"></div>
        <div class="driver-content">
          <p class="driver-name">
            {{t "clusterNew.amazoneks.shortLabel"}}
          </p>
        </div>
      </a>
      <a
        class="col span-2 cluster-driver-box small span-height"
        href="{{href-to "global-admin.clusters.new.launch" "import" (query-params importProvider='gke')}}"
        disabled={{disabledAddCluster}}
      >
        <div class="machine-driver googlegke"></div>
        <div class="driver-content">
          <p class="driver-name">
            {{t "clusterNew.googlegke.shortLabel"}}
          </p>
        </div>
      </a>
      <a
        class="col span-2 cluster-driver-box small span-height"
        href="{{href-to "global-admin.clusters.new.launch" "import" (query-params importProvider='other')}}"
        disabled={{disabledAddCluster}}
      >
        <div class="machine-driver import-driver"></div>
        <div class="driver-content">
          <p class="driver-name">
            {{t "clusterNew.import.label"}}
          </p>
        </div>
      </a>
    </div>
  </div>
  <div class="row">
    <h2>
      {{t "clusterNew.custom.title"}}
    </h2>
    <div class="col span-12 mt-0">
      <div>
        <label class="acc-label">
          {{t "clusterNew.custom.subtitle"}}
        </label>
      </div>
      <a
        class="col span-2 cluster-driver-box small span-height full-height"
        href="{{href-to "global-admin.clusters.new.launch" "custom"}}"
        disabled={{disabledAddCluster}}
      >
        <div class="machine-driver custom-driver"></div>
        <div class="driver-content">
          <p class="driver-name">
            {{t "clusterNew.custom.label"}}
          </p>
        </div>
      </a>
    </div>
  </div>
  {{#if (gt (get (get providerGroups "rkeGroup") "length") 0)}}
    <div class="row">
      <div class="col span-12">
        <div>
          <label class="acc-label">
            {{t "clusterNew.driverLabels.infra"}}
          </label>
        </div>
        {{#each (get providerGroups "rkeGroup") as |provider|}}
          {{#if disabledAddCluster}}
            <a
              class={{concat
                "col span-2 cluster-driver-box small span-height full-height bg-disabled btn-disabled "
                provider.name
              }}
              href="javascript:void(0);"
            >
              <div
                class="machine-driver
                  {{if provider.genericIcon "generic"}}

                  {{provider.name}}"
              ></div>
              <div class="driver-content">
                <p class="driver-name">
                  {{driver-name provider.name}}
                </p>
              </div>
            </a>
          {{else}}
            {{#link-to
              "clusters.new.launch"
              provider.name
              class=(concat
                "col span-2 cluster-driver-box small span-height full-height "
                provider.name
              )
            }}
              <div
                class="machine-driver
                  {{if provider.genericIcon "generic"}}

                  {{provider.name}}"
              ></div>
              <div class="driver-content">
                <p class="driver-name">
                  {{driver-name provider.name}}
                </p>
              </div>
            {{/link-to}}
          {{/if}}
        {{/each}}
      </div>
    </div>
  {{/if}}
  {{#if (gt (get (get providerGroups "cloudGroup") "length") 0)}}
    <div class="row">
      <div class="col span-12">
        <div>
          <label class="acc-label">
            {{t "clusterNew.driverLabels.cloud"}}
          </label>
        </div>
        {{#each (get providerGroups "cloudGroup") as |provider|}}
          {{#unless provider.scriptError}}
            {{#unless (or (eq provider.name "amazoneks") (eq provider.name "googlegke"))}}
              {{#link-to
                "clusters.new.launch"
                provider.name
                class=(concat
                  "col span-2 cluster-driver-box small span-height full-height "
                  provider.name
                )
              }}
                <div
                  class="machine-driver
                    {{if provider.genericIcon "generic"}}

                    {{provider.name}}"
                ></div>
                <div class="driver-content">
                  <p class="driver-name">
                    {{driver-name provider.name}}
                  </p>
                </div>
              {{/link-to}}
            {{/unless}}
          {{else}}
            <div
              class={{concat
                "disabled error-loading-driver col span-2 cluster-driver-box small span-height full-height "
                provider.name
              }}
            >
              {{#tooltip-element
                type="tooltip-basic"
                model=provider.scriptError
                tooltipTemplate="tooltip-static"
                aria-describedby="tooltip-base"
                tooltipFor="tooltipDriverError"
              }}
                <span class="icon icon-alert"></span>
              {{/tooltip-element}}
              <div class="machine-driver {{provider.name}}"></div>
              <div class="driver-content">
                <p class="driver-name">
                  {{driver-name provider.name}}
                </p>
              </div>
            </div>
          {{/unless}}
        {{/each}}
      </div>
    </div>
  {{/if}}
</div>
<div class="footer-actions mt-20">
  {{#link-to "clusters.index" classNames="btn bg-transparent"}}
    {{t "generic.cancel"}}
  {{/link-to}}
</div>